import { RouterButton } from '../../../../components'
import { getCurrentTime } from '../../../../lib'

export default function Page(props:any) {
  return (
    <main>
      <h1>Comments Details Page {props.postId}::{props.data?.id}</h1>
      <h4>{props.dt}</h4>
      <RouterButton />
      { !!props.data?.id &&
        <>
          <p>{props.data.body}</p>
          <h6>- {props.data.user?.username ?? ''}</h6>
        </>
      }
    </main>
  )
}

export async function getStaticPaths() {
  return {
    paths: [
      { params: { postId: '1', commentsId: '1' } },
      { params: { postId: '1', commentsId: '2' } },
      { params: { postId: '8', commentsId: '1' } },
      { params: { postId: '8', commentsId: '2' } },
    ],
    fallback: false,
  }
}

export async function getStaticProps(context:any) {
  const dt = getCurrentTime()
  const id = context.params.commentsId;

  const response = await fetch(`https://dummyjson.com/comments/${id}`)
  const reply = await response.json()

  return ({
    props: {
      dt,
      postId: context.params.postId,
      data: reply,
    }
  })
}
